<template>
  <div class="subject-grade">
        <el-form-item>
          <el-checkbox-group v-model="checkedSubject" @change="handleCheckedSubjectChange()" class="role-cont t-flex">
            <el-checkbox :label="item.id" v-for="item in condition.subjectList" :key="item.id">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <div class="subject" v-if="checkedSubject.length>=1">
          <div slot="label" class="label">
            学段：
          </div>
          <div class="role-cont t-flex">
            <ul>
              <li v-for="(gradesList,index) in gradesBySubject" :key="index">
                <h4>{{gradesList.subjectName}}</h4>
                <div class="grade">
                  <el-checkbox label="" :key="0" v-model="gradesList.checkAll" :indeterminate="gradesList.isIndeterminate" @change="handleCheckAllChange(gradesList)">全部</el-checkbox>
                  <el-checkbox-group v-model="gradesList.baseSectionIds" @change="handleCheckedGraderChange(gradesList)">

                    <el-checkbox :label="item.id" v-for="item in gradesList.list" :key="item.id">{{item.name}}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </li>
            </ul>
          </div>
        </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import io from '../../lib/io'
export default {
  name:'subject-grade',
  data () {
      return {
          checkedSubject:[],
      gradesBySubject: [],
      }
  },
  computed: {
    ...mapState(['condition']),
  },
  created () {
    this.findSubjectsData({ pageIndex: 1, pageSize: 1000000, })
  },
  methods: {
    ...mapActions(['findSubjectsData','findBaseSchoolPage']),
    handleCheckedSubjectChange(val) {
        console.log(this.checkedSubject)
      if (this.checkedSubject.length != 0) {
        this.findBaseSectionBySubject()
      }
    },
    // 全选
    handleCheckAllChange(row) {
      let allList = []
      row.list.map((item) => {
        allList.push(item.id)
      })
      row.baseSectionIds = row.checkAll ? allList : [];
      row.isIndeterminate = false
    },
    // 全选
    handleCheckedGraderChange(row) {
      let checkedCount = row.baseSectionIds.length;
      row.checkAll = checkedCount === row.list.length;
      row.isIndeterminate = checkedCount > 0 && checkedCount < row.list.length;
    },
    // 通过科目查找年级
    findBaseSectionBySubject(subjectSectionList) {
      let param = {
        subjectId: subjectSectionList || this.checkedSubject.join(',')
      }
      io.post(io.findBaseSectionBySubject, param, (ret) => {
        if (!subjectSectionList) {//只有在教务的时候才会传值(subjectSectionList=[])，以此来判断（教务显示全部，不传课程id时候返回的值为全部）
          ret.map(item => {
            let baseSectionIds = []
            let nullData = 0
            item.checkAll = false
            item.isIndeterminate = true
            if (this.subjectSectionList.length >= 1) {
              this.subjectSectionList.map((ite) => {
                if (item.subjectId == ite.subjectId) {
                  ite.sectionList.map(i => {
                    baseSectionIds.push(i.sectionId)
                  })
                  item.baseSectionIds = JSON.parse(JSON.stringify(baseSectionIds))
                }
                if (ite.subjectId != item.subjectId) {
                  nullData++
                  if (nullData === this.subjectSectionList.length) {
                    item.baseSectionIds = []
                  }
                }
              })
            } else {
              item.baseSectionIds = []
            }
          })
          console.log(this.gradesBySubject)
          this.gradesBySubject = ret
        } else {//教务的情况
          ret.map(item => {
            let baseSectionIds = []
            item.list.map(ite => {
              baseSectionIds.push(ite.id)
            })
            item.baseSectionIds = baseSectionIds
          })
          this.gradesAllBySubject = ret
        }
      })
    },
  }
}
</script>
<style scoped lang="less">
      .subject {
        display: flex;
        margin-bottom: 38px;
        .label {
          width: auto;
          padding-right: 20px;
          color: #333;
        }
        .el-radio {
          color: #333;
        }
        .role-cont {
          flex: 1;
          text-align: left;
          .el-checkbox {
            margin-right: 30px;
            margin-bottom: 10px;
            color: #333;
          }
          ul {
            li {
              margin-bottom: 20px;
              h4 {
                font-size: 14px;
                color: #333;
                height: 40px;
                background: #cceff6;
                font-weight: 500;
                padding-left: 24px;
                line-height: 40px;
                margin: 0;
              }
              .grade {
                background: #f8f8f8;
                padding: 28px 24px;
              }
            }
          }
        }
      }
</style>


